2023/12/235712字符

回调地狱

可复用性弱
可阅读性差、可维护性差、可迭代性差
扩展性差

$.ajax({
    url: 'https://open.duyiedu.com/jq/movie/power',
    type: 'POST',
    data: {
        username: 'cst',
        password: '123123',
    },
    success: function (res) {
        console.log(res);
        if (res.data.power == 'root') {
            $.ajax({
                url: 'https://open.duyiedu.com/jq/movie/movieList',
                type: 'GET',
                success: function (res) {
                    console.log(res.data);
                    var data = res.data;
                    var $wrap = $('.wrapper');
                    $.each(data, function (index, ele) {
                        var $MovieSection = $('.tpl').clone().removeClass('tpl').addClass('movieSection');
                        $MovieSection.data({id: ele.id}).on('click', function () {
                            $.ajax({
                                url: 'https://open.duyiedu.com/jq/movie/movieInfo',
                                type: 'GET',
                                data: {
                                    movieId: $(this).data('id')
                                },
                                success: function (res) {
                                    var htmlStr = `<div class='mask'>
                                        <p>导演：${data.direct}</p>
                                        <p>导演：${data.gut}</p>
                                        <p>主演: ${data.mainActor.reduce(function (prev, curv) {
                                            prev += curv + ' ';
                                            return prev;
                                        }, '')}</p>\
                                        <p>编剧: ${data.screenWriter.reduce(function (prev, curv) {
                                            prev += curv + ' ';
                                            return prev;
                                        }, '')}</p>\
                                    </div>`;
                                    $(htmlStr)
                                        .appendTo('body')
                                            .css({
                                                position: 'absolute',
                                                left: $(window).outerWidth() / 2,
                                                bottom: 100,
                                                width: 400,
                                                marginLeft: -200
                                            })
                                }
                            })
                        }).children()
                            .eq(0).attr('src', ele.poster)
                                .next().text(ele.name);
                        $wrap.append($MovieSection);
                    })
                },

            })
        }else {

        }
    }
});

设计模式

单一值原则：一个类只负责一项职责，尽量做到类的只有一个行为原因引起变化；
开闭原则：用抽象构建架构，用实现扩展原则；
里氏替换原则：所有引用基类（父类）的地方必须能透明地使用其子类的对象。
依赖倒置原则：使用接口或抽象类
接口隔离原则：一个接口对实现它的类都是有用的。接口足够小
迪米特原则：类中只暴露不得不暴露的，其内部实现不暴露出去。 ```js (function () { return $.ajax({ url: 'https://open.duyiedu.com/jq/movie/power', type: 'POST', data: { username: 'cst', password: '123123', }, }); })().then(function (res) { // console.log(res); if (res.data.power == 'root') { return $.ajax({ url: 'https://open.duyiedu.com/jq/movie/movieList', type: 'GET', }) } }).then(function (res) { console.log(res.data); var data = res.data; var $wrap = $('.wrapper'); var df = $.Deferred(); $.each(data, function (index, ele) { var $MovieSection = $('.tpl').clone().removeClass('tpl').addClass('movieSection'); $MovieSection.data({id: ele.id}) .on('click', function () { df.resolve( $(this) ); }) .children() .eq(0).attr('src', ele.poster) .next().text(ele.name); $wrap.append($MovieSection); }); return df.promise(); }).then(function (dom) { console.log(dom); return $.ajax({ url: 'https://open.duyiedu.com/jq/movie/movieInfo', type: 'GET', data: { movieId: dom.data('id') }
}); }).then(function (res) { var data = res.data; var direct = data.direct; var gut = data.gut; var mainActor = data.mainActor; var screenWriter = data.screenwriter;

var htmlStr = '

导演: ' + direct + '

剧情: ' + gut + '

主演: ' + mainActor.reduce(function (prev, curv) { prev += curv + ' '; return prev; }, '') + '

编剧: ' + screenWriter.reduce(function (prev, curv) { prev += curv + ' '; return prev; }, '') + '
\

'
$(htmlStr) .appendTo('body') .css({ position: 'absolute', left: $(window).outerWidth() / 2, bottom: 100, width: 400, marginLeft: -200 });

});